<!-- @format -->
<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      size="small"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="状态" prop="state">
        <el-select v-model="ruleForm.state" placeholder="请选择状态">
          <el-option label="激活" value="激活"></el-option>
          <el-option label="未激活" value="未激活"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <div id="search">
      姓名： <el-input v-model="search.name"></el-input> 性别：<el-select
        v-model="search.sex"
        placeholder="请选择"
      >
        <el-option
          v-for="item in sexoptions"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      状态：<el-select v-model="search.state" placeholder="请选择">
        <el-option
          v-for="item in stateoptions"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      时间:<el-date-picker
        v-model="search.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="primary" @click="searchid(search)">搜索</el-button>
      <el-button @click="clearS">清空</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        state: '',
        email: '',
        age: '',
        date: new Date().toLocaleString()
      },
      //表格校验
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],

        sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
      },

      //表格数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          age: '15',
          sex: '男',
          email: '456',
          state: '激活'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          age: '15',
          sex: '男',
          email: '456',
          state: '激活'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          age: '15',
          sex: '男',
          email: '456',
          state: '激活'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '15',
          sex: '男',
          email: '456',
          state: '激活'
        }
      ],
      //搜索条件储存
      search: {
        name: '',
        sex: '',
        state: '',
        time: ''
      },
      sexoptions: [
        { id: 1, label: '男', value: '男' },
        { id: 2, label: '女', value: '女' }
      ],
      stateoptions: [
        {
          id: 1,
          label: '激活',
          value: '激活'
        },
        { id: 2, label: '未激活', value: '未激活' }
      ],

      tableDataSaved: []
    };
  },

  methods: {
    //添加
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let obj = JSON.stringify(this.ruleForm);
          obj = JSON.parse(obj); //深拷贝ruleform   不然重置按钮会清空表格里面添加的数据
          this.tableData.push(obj);
          alert('添加成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //删除
    handleDelete(index, row) {
      console.log(index);
      this.tableData.splice(index, 1);
    },
    //搜索
    searchid(key) {
      console.log(key, '1232');
      if (key) {
        //新建空数组用于存放结果
        let arr = [];
        if (key.time.length > 0) {
          console.log('进入判断');
          let startTime = key.time[0].getTime();
          let endTime = key.time[1].getTime();
          console.log(startTime);
          console.log(endTime);
          //时间戳
          console.log(this.tableData);
          let res = this.tableData.filter(item => {
            return (
              item.name == key.name &&
              item.sex == key.sex &&
              item.state == key.state
            );
          });
          console.log(res, '过滤之后的结果');
          //过滤出满足条件的然后再进行时间戳的比较
          res.forEach(item => {
            if (
              startTime <= new Date(item.date).getTime() &&
              new Date(item.date).getTime() <= endTime
            ) {
              arr.push(item);
            }
          });
          //储存搜索结果
          this.searchResult = arr;

          this.tableDataSaved = this.tableData;
          this.tableData = this.searchResult;
        }
      }
    },

    clearS() {
      this.search = {};
      this.tableData = this.tableDataSaved;
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 30%;
}
</style>
